<template>
  <span v-if="readonly">
    <el-tag v-if="enabled" type="success">启用</el-tag>
    <el-tag v-else type="info">禁用</el-tag>
  </span>
  <el-switch
    v-else
    v-model="enabled"
    active-color="#67C23A"
    @change="onChange"
  />
</template>

<script>
export default {
  model: {
    event: 'change'
  },
  props: {
    readonly: Boolean,
    value: null,
    role: Object
  },
  watch: {
    value(v) {
      this.enabled = !!v;
    }
  },
  data() {
    return {
      enabled: !!this.value
    };
  },
  methods: {
    async onChange(value) {
      const ret = await this.$http.put('/api/role/status', {id: this.role.id, status: +value});
      if (ret.success) {
        this.$message.success(ret.message);
      } else {
        this.enabled = +!value;
      }
      this.$emit('change', value);
    }
  },
}
</script>